<template>
  <div class="targetarea" @drop="drop" @dragover="allowDrop" :style="style">
  </div>
</template>

<script>
  import { mapActions } from 'vuex'
  export default {
    props: {
      dom: window.Element,
      layIndex: Number,
      gridIndex: Number,
      grid: {
        width: Number,
        height: Number,
        left: Number,
        top: Number
      }
    },
    data () {
      return {
        // program: []
      }
    },
    computed: {
      style () {
        return {
          width: this.grid.width + 'vw',
          height: this.grid.height + 'vh',
          'margin-left': this.grid.left === 0 ? '' : this.grid.left + 'vw',
          'margin-top': this.grid.top === 0 ? '' : this.grid.top + 'vh',
          position: 'fixed'
        }
      }
    },
    methods: {
      ...mapActions([
        'addLayoutProgram'
      ]),
      drop: function (event) {
        event.preventDefault()
        // this.grid.program = this.program
        // this.program.splice(0, 1, this.grid.program)
        if (event.target.firstChild) {
          event.target.replaceChild(this.dom, event.target.firstChild)
        } else {
          event.target.appendChild(this.dom)
        }
        this.addLayoutProgram(
          {
            layIndex: this.layIndex,
            gridIndex: this.gridIndex,
            program: this.dom.innerText
          })
        // this.$state.layouts[this.layIndex].grid[this.gridIndex].program = this.dom.innerText
        // console.log(this.$state.layouts)
        // this.grid.program = this.dom.innerText
        // this.addScreen(this.grid)
      },
      allowDrop: function (event) {
        event.preventDefault()
      }
    }
  }
</script>

<style scoped>
  .targetarea {
    border: 1px solid black;
  }
</style>
